<template>
	<view class="vInput">
		<view
			v-for="(item,index) in num" :key="index"
			@click="focus = !focus"
			:class="inputVal.length >= index ? 'vIn_item f_shrink0 bold active' : 'vIn_item f_shrink0 bold' "
		>
			{{s_number(index)}}
		</view>
		<view class="p_input">
			<input
				ref="v_input"
				type="number"
				auto-focus="true"
				v-model="inputVal"
				:focus="focus"
				:maxlength="num"
				@blur="focus = false"
				@focus="focus = true"
				@input="inputValChange"
			>
		</view>
	</view>
</template>

<script>
	export default {
		name:"vInput",
		props:{
			num:{
				type:Number,
				default:5
			}
		},
		data() {
			return {
				focus:false,
				inputVal:''
			};
		},
		methods:{
			s_number(index){
				return this.inputVal.substring(index,index+1)
			},
			//事件
			inputValChange(e){
				const _this = this;
				let v = e.target.value;
				setTimeout(()=>{
					_this.inputVal = v.replace('.','');
					if(_this.inputVal.length == _this.num){
						_this.$emit('isDone',_this.inputVal);
						_this.focus = false;
					}
				},100)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.vInput{
		width: 100%;
		height: 88rpx;
		@include flex_align;
		position: relative;
		.vIn_item{
			width: 70rpx;
			height: 70rpx;
			border: solid 4rpx #f1f1f1;
			background-color: #fff;
			border-radius: 50%;
			@include flex_center;
			font-size: 48rpx;
			color: #CE7501;
			&.active{
				border: solid 4rpx #FAD550;
			}
		}
		.p_input{
			width: 1rpx;height: 1rpx;
			position: absolute;
			left: -1;
			bottom: -1;
			overflow: hidden;
		}
	}
</style>
